<template>
  <div class="information-container">
    <head-info>
      <template #left>
        <div class="left"><i class="fa fa-newspaper-o"></i> 最新资讯</div>
      </template>
      <template #right>
        <button class="myBtn">
          <a href="https://www.ali213.net/" style="color: #fff" target="_blank"
            >查看更多</a
          >
        </button>
      </template>
    </head-info>
    <div class="infromation-content">
      <div class="swiperLeft">
        <info-judge />
      </div>
      <div class="infoRight">
        <info-list />
      </div>
    </div>
  </div>
</template>

<script setup>
import headInfo from "@/components/home/headInfo.vue";
import infoList from "@/components/home/gameInformation/infoList.vue";
import infoJudge from "@/components/home/gameInformation/infoJudge.vue";
</script>

<style scoped lang="less">
.information-container {
  width: 65%;
  .infromation-content {
    display: flex;
    .swiperLeft {
      flex: 1;
      max-width: 70%;
      height: 500px;
      /deep/ .el-carousel__container {
        height: 450px;
      }
    }
    .infoRight {
      width: 470px;
    }
  }
  .myBtn {
    width: 100px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    height: 25px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    background-image: linear-gradient(
      to right,
      #f5ce62,
      #e43603,
      #fa7199,
      #e85a19
    );
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
    border-radius: 50px;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    &:hover {
      background-position: 100% 0;
      -o-transition: all 0.4s ease-in-out;
      -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
    }
  }
}
</style>
